<#include "../component/layout.html"/>
<@layout>
<div class="goods-items clearfix">
	<div class="main">
		<!-- 搭配列表开始 -->
		<ul class="relate-list" id="relate-list">
			<#list style.styleItems as item>
			<#if item.selected?? && item.selected==1>
			<li class="on">
				<a class="thumb" href="/similar/${item.style_id}-${item.sequence}">
					<img src="${item.style_url!}">
				</a>
				<span class="cart-icon"></span>
				<div class="arrow"><div class="arrow-inner"></div></div>
			</li>
			<#else>
			<li>
				<a class="thumb" href="/similar/${item.style_id}-${item.sequence}">
					<img src="${item.style_url!}">
				</a>
				<span class="cart-icon"></span>
			</li>
			</#if>
			</#list>
		</ul>
		<!-- 搭配列表结束 -->
		<!-- 单品列表开始 -->
		<div class="item-list clearfix">
			<#list style.similarItems as item>
			<div class="good-item">
				<div class="pic" style="height:${item.item_height}px;">
		        	<a href="${item.buy_url}" target="_blank">
		            	<img width="${item.item_width}px" height="${item.item_height}px" alt="${item.description}" title="${item.description}" data-original="${item.item_url}" >
		          	</a>
		      	</div>
		        <div class="good-desc-wrap">
		        	<p class="desc">
		            	${item.description}
					</p>
		        	<div class="overlay"></div>
		            <div class="price">
		            	<span>￥${item.price}</span>
		            </div>
		        </div>
		    </div>
			</#list>
		</div>
		<!-- 单品列表开始结束 -->
	</div>
	<div class="collocation">
		<!-- 相关推荐开始 -->
		<div class="good-related clearfix">
        	<h2>相关联搭配图</h2>
        	<div class="pic">
        		<a href="/style/${style.id}" target="_blank">
                	<img src="${style.detail_url}" title="${style.description}" alt="${style.description}">
               	</a>
        	</div>
            <!-- 商品信息开始 -->
			<div class="good-info">
				<h2>
					${style.description!}
				</h2>
				<div class="brand">
					<ul>
						<li>
							<img class="user-pic" width="60" height="60" src="${style.avatar_large}">
						</li>
						<li>
							<a class="user-name" href="/user/${style.user_id}">${style.nickname}</a>
                            <p><span class="time-icon">发布于${style.check_time}</span></p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 商品信息结束 -->
        </div>
		<!-- 相关推荐结束 -->
	</div>
</div>
</@layout>
<script type="text/javascript">
$(function(){
	$('.item-list').masonry({
        itemSelector: '.good-item',
        isFitWidth:true
    });
	$('img[data-original]').lazyload({effect:'fadeIn',failure_limit:10});
});
</script>